<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>17 疫情防控三分化分百度引擎</title>
    <script src="http://api.map.baidu.com/api?v=2.0&ak=3LiphISVhEplmviL7E7ChfaaBkPW7EGp"></script>
    <script src="../lib/jQuery/jquery-3.6.0.js"></script>
    <script src='../lib/gcoord.js'></script>
    <script src='js/mockData.js'></script>
    <script src='js/equipmentMapUtil.js'></script>
    <style>
        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        #all-map {
            width: 100%;
            height: 100%;
        }
    </style>

</head>
<body>
<table>
    <tr>
        <td>城市：</td>
        <td><input id='cityId' type='text' value='杭州'/></td>
        <td>小区：</td>
        <td><input type="text" value="富力西溪悦墅" id="areaId"></td>
        <td>
            <button id='showBtn'>显示</button>
        </td>
        <td>道路名：</td>
        <td><input type="text" value="高教路" id="roadId"></td>
        <td>
            <button id='showRoadBtn'>显示</button>
        </td>
    </tr>
</table>
<div id='all-map'></div>
<script>
    // 社区边界
    let community = formatCommunity(wuchangshequArray);

    $(document).ready(() => {
        let map = new BMap.Map('all-map');
        // map.centerAndZoom('杭州', 15);
        const centerPoint = new BMap.Point(120.025359, 30.290321);
        map.centerAndZoom(centerPoint, 17);
        // map.addControl(new BMap.MapTypeControl());

        map.enableScrollWheelZoom(true);
        map.clearOverlays();

        let geoc = new BMap.Geocoder();
        map.addEventListener('click', evt => {
            geoc.getLocation(evt.point, rs => {
                console.log(rs);
            });
        });

        /*let formatPoints = [];

        formatPoints = parseGeo(roadData).points.map(item => {
            return item.split(';');
        }).map(item => {
            return item.map(point => {
                return gcoord.transform([Number(point.split(',')[0]), Number(point.split(',')[1])], gcoord.BD09MC, gcoord.BD09);
            });
        });

        const points = formatPoints.map(list => {
            return list.map(item => {
                return new BMap.Point(item[0], item[1]);
            });
        });*/

        // points.forEach(list => {
        //     /*list.forEach(point => {
        //         const marker = new BMap.Marker(point);
        //         map.addOverlay(marker);
        //     });*/
        //     const polyline = new BMap.Polyline(list, {
        //         stroke: 'blue',
        //         strokeWeight: 10,
        //         strokeOpacity: 0.5
        //     });
        //     map.addOverlay(polyline);
        // });

        const gcoordArr1 = gcoord.transform([13356982.948082436, 3513678.553584229], gcoord.BD09MC, gcoord.BD09);
        const gcoordP1 = new BMap.Point(gcoordArr1[0], gcoordArr1[1]);

        /* const circle1 = new BMap.Circle(gcoordP1, 3000, {
             strokeColor: 'green',
             strokeWeight: 1,
             fillColor: 'rgba(218,139,236,0.63)',
             strokeOpacity: 1
         }); //创建圆*/
        // map.addOverlay(circle1);
        const marker1 = new BMap.Marker(gcoordP1);
        // map.addOverlay(marker1);

        // const circleP = gcoord.transform([13362237.664999997, 3517425.26], gcoord.BD09MC, gcoord.BD09);
        const gcoordArr2 = gcoord.transform([13364586.010448027, 3517389.0064157704], gcoord.BD09MC, gcoord.BD09);
        const gcoordP2 = new BMap.Point(gcoordArr2[0], gcoordArr2[1]);
        const marker2 = new BMap.Marker(gcoordP2);
        // map.addOverlay(marker2);

        /*const circle = new BMap.Circle(circlePoint, 800, {
            strokeColor: 'green',
            strokeWeight: 2,
            fillColor: '#f4bc21',
            strokeOpacity: 1
        }); //创建圆
        map.addOverlay(circle);*/


        /**
         * 绘制区域
         * @param {string} city 城市名
         * @param {string} house 小区名
         */
        let showArea = function (city, house) {
            const params = {
                house,
                city,
                ak: '3LiphISVhEplmviL7E7ChfaaBkPW7EGp'
            };

            queryHouse(params, ({message, results}) => {
                if (message === 'ok') {
                    let houses = results;
                    if (houses && houses.length > 0) {
                        let house = houses[0];
                        queryHouseOutline(house.uid, function (houseOutline) {
                            const geo = houseOutline.content.geo;
                            if (!geo) {
                                let location = house.location;
                                let point = new BMap.Point(location.lng, location.lat);
                                map.centerAndZoom(point, 19);
                                let marker = new BMap.Marker(point);
                                marker.setAnimation(BMAP_ANIMATION_BOUNCE);
                                map.addOverlay(marker);
                            } else {
                                let geoObj = parseGeo(geo);
                                //var bounds = coordinateToPoints(geoObj.bound);
                                // console.log(geoObj.points);


                                // let arrStr = getNewPoints(geoObj.points, halfX, halfY, 50);
                                // console.log(arrStr);
                                //边界点
                                // let points = coordinateToPoints(map, geoObj.points);
                                // preventionArea(community);  // 防范区
                                // sealedArea(geoObj.points, 50);  // 管控区
                                // console.log(geoObj.points);
                                controlArea(geoObj.points); // 封控区
                            }
                        });
                    }
                }
            });
        };

        let getCenterCoordinate = (points) => {
            const coordinate_X = [];
            const coordinate_Y = [];

            points.split(';').forEach(item => {
                item.split(',').forEach((coordinate, index) => {
                    if (index === 0) { // x
                        return coordinate_X.push(Number(coordinate));
                    } else { // y
                        return coordinate_Y.push(Number(coordinate));
                    }
                });
            });
            const halfX = (Math.max(...coordinate_X) + Math.min(...coordinate_X)) / 2;
            const halfY = (Math.max(...coordinate_Y) + Math.min(...coordinate_Y)) / 2;
            return {
                halfX,
                halfY
            };
        };

        let getNewPoints = (points, halfX, halfY, metre) => {
            return points.split(';').map(item => {
                return item.split(',').map((coordinate, index) => {
                    if (index === 0) { // x
                        if (Number(coordinate) >= halfX) {
                            return Number(coordinate) + metre;
                        } else {
                            return Number(coordinate) - metre;
                        }
                    } else { // y
                        if (Number(coordinate) >= halfY) {
                            return Number(coordinate) + metre;
                        } else {
                            return Number(coordinate) - metre;
                        }
                    }
                }).toString();
            }).reduce((pre, cur, index, arr) => {
                if (index === arr.length - 1) {
                    return pre + cur;
                } else {
                    return pre + cur + ';';
                }
            }, '');
        };

        let controlArea = (points) => {
            let ply = new BMap.Polygon(coordinateToPoints(map, points), {
                strokeWeight: 2,
                strokeColor: '#F01B2D',
                strokeOpacity: 0.9,
                fillColor: 'rgba(255,235,204,0.37)'
            }); //建立多边形覆盖物
            map.addOverlay(ply); //添加覆盖物
            map.setViewport(ply.getPath()); //调整视野
        };

        let sealedArea = (points, metre) => {
            const {halfX, halfY} = getCenterCoordinate(points);
            let ply = new BMap.Polygon(coordinateToPoints(map, getNewPoints(points, halfX, halfY, metre)), {
                strokeWeight: 2,
                strokeColor: '#1c5eef',
                strokeOpacity: 0.9,
                fillColor: '#add6f1'
            }); //建立多边形覆盖物
            map.addOverlay(ply); //添加覆盖物
        };

        let preventionArea = (points) => {
            const {halfX, halfY} = getCenterCoordinate(points);
            let ply = new BMap.Polygon(coordinateToPoints(map, points), {
                strokeWeight: 2,
                strokeColor: '#047f20',
                strokeOpacity: 0.9,
                fillColor: 'rgba(174,250,175,0.38)'
            }); //建立多边形覆盖物
            map.addOverlay(ply); //添加覆盖物
        };

        let drawRoadMethod = (wd) => {
            drawRoad(wd, (data) => {
                const formatPoints = parseGeo(data.content[0]['profile_geo']).points.map(item => {
                    return item.split(';');
                }).map(item => {
                    return item.map(point => {
                        return gcoord.transform([Number(point.split(',')[0]), Number(point.split(',')[1])], gcoord.BD09MC, gcoord.BD09);
                    });
                });

                const points = formatPoints.map(list => {
                    return list.map(item => {
                        return new BMap.Point(item[0], item[1]);
                    });
                });

                points.forEach(list => {
                    const polyline = new BMap.Polyline(list, {
                        stroke: 'blue',
                        strokeWeight: 10,
                        strokeOpacity: 1
                    });
                    map.addOverlay(polyline);
                });
            });
        };


        const drawAreaMethod = () => {
            $('#areaId').val().split(',').forEach(item => {
                showArea($('#cityId').val(), item);
            });
        };

        drawAreaMethod();

        $('#showBtn').click(function () {
            map.clearOverlays();
            drawAreaMethod();
        });

        $('#showRoadBtn').click(() => {
            map.clearOverlays();
            $('#roadId').val().split(',').forEach(item => {
                drawRoadMethod(item);
            });
        });
    });
</script>
</body>
</html>